<template>
  <view class="flex-col">
    <view class="page-wrap" :class="'bottom115'">
      <uni-forms ref="ruleForm" v-model="ruleForm" labelWidth="auto" :labelPosition="'top'">

        <uni-forms-item :required="true" name="vinNo" label="车架号:"
                        :rules="mRule('请输入车架号', 'bind')">
          <text class="vinNo"/>
          <uni-easyinput v-if="vinBoole" type="text" v-model="ruleForm.vinNo"
                         @clear="handleClear"
                         @blur="handleBlurV(ruleForm.vinNo)"
                         placeholder="请输入车架号"/>
          <zxz-uni-data-select
              v-else
              @change="handleChange"
              v-model="ruleForm.vinNo"
              dataKey="vinNo"
              dataValue="carId"
              filterable
              ref="refZxzUniDataSelectV"
              :localdata="vinList"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item name="carNo" label="车牌号:">
          <uni-easyinput v-if="carBoole" type="text" v-model="ruleForm.carNo"
                         @clear="handleClear"
                         @blur="handleBlurC(ruleForm.carNo)"
                         placeholder="请输入车牌号"/>
          <zxz-uni-data-select
              v-else
              @change="handleSelectCarNo"
              v-model="ruleForm.carNo"
              dataKey="carNo"
              dataValue="carId"
              filterable
              ref="refZxzUniDataSelectC"
              :localdata="carList"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item label="品牌:">
          <text class="brandName"/>
          <uni-easyinput disabled type="text" v-model="ruleForm.brandName" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item label="车型:">
          <text class="seriesName"/>
          <uni-easyinput disabled type="text" v-model="ruleForm.seriesName"
                         placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item label="车款:">
          <text class="modelName"/>
          <uni-easyinput disabled type="text" v-model="ruleForm.modelName" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item :required="true" name="ascription" label="车辆归属:"
                        :rules="mRule('请选择车辆归属', 'bind')">
          <text class="ascription"/>
          <uni-easyinput disabled type="text" v-model="ruleForm.ascription"
                         placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item :required="true" name="ascription" label="车辆产权:"
                        :rules="mRule('请选择车辆产权', 'bind')">
          <text class="ascription"/>
          <uni-easyinput disabled type="text" v-model="ruleForm.propertyRightName"
                         placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item :required="true" name="insuranceChannels" label="工单类型:"
                        :rules="mRule('请选择工单类型', 'bind')">
          <text class="ascription"/>
          <uni-data-select
              placeholder="请选择工单类型"
              v-model="ruleForm.insuranceChannels"
              :localdata="insuranceList"></uni-data-select>
        </uni-forms-item>

        <uni-forms-item required name="businessType" label="车辆状态:"
                        :rules="mRule('请选择车辆状态', 'bind')">
          <text class="businessType"/>
          <zxz-uni-data-select
              placeholder="系统根据车牌号/车架号自动获取"
              disabled
              v-model="ruleForm.businessType"
              dataKey="label"
              dataValue="value"
              :localdata="dict.type.car_business_type"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item name="procurementReportNumber" label="采购禀议号:">
          <uni-easyinput type="text" v-model="ruleForm.procurementReportNumber"
                         placeholder="请输入采购禀议号"/>
        </uni-forms-item>

        <uni-forms-item name="contractReportNumber" label="合同禀议号:">
          <uni-easyinput type="text" v-model="ruleForm.contractReportNumber"
                         placeholder="请输入合同禀议号"/>
        </uni-forms-item>


      </uni-forms>
    </view>

    <view class="button-container">
      <button class="btn-item" @click="submit">提 交</button>
    </view>
  </view>
</template>

<script>
import {getVinNo, getCarNo, findCarOrderVoByCarId, submitCarWorkOrder} from "@/api/maintain/maintainList";

export default {
  name: 'addNewCarInsure',//|新增新车投保
  dicts: ['car_business_type'],
  computed: {},
  watch: {
    vinList: {
      handler(val) {
        if (val && val.length === 0) {
          this.vinBoole = true
        }
      },
      deep: true,

    },
    carList: {
      handler(val) {
        if (val && val.length === 0) {
          this.carBoole = true
        }
      },
      deep: true,

    }
  },
  data() {
    return {
      ruleForm: {
        carNo: "",
        vinNo: "",
        orderCode: "",
        customerName: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        ascription: "",
        procurementReportNumber: "",
        contractReportNumber: "",
        businessType: "",
        businessName: "",
        carId: 0,
        aaa: "",
        workOrderType: 0,
        contractType: "",
        orderId: "",
        propertyRightName: '',
        propertyRightId: '',
        insuranceChannels: 1
      },
      insuranceList: [
        {text: '我司购买', value: 1}
      ],
      vinList: [],
      vinBoole: true,
      carList: [],
      carBoole: true,
      workOrderType:'',
    };
  },
  onLoad(op) {
    this.ruleForm.workOrderType = op?.workOrderType || 0
    this.workOrderType = op?.workOrderType || 0
  },
  created() {
  },
  mounted() {
  },
  methods: {

    async handleBlurV(val) {
      try {
        if (!val) return
        const res = await getVinNo(val);
        this.vinList = res.data;
        this.vinBoole = false
        if (this.vinList.length > 0) {
          this.$nextTick(() => {
            this.$refs.refZxzUniDataSelectV.showSelector = true
          })
        }
      } catch (e) {
        console.error(e)
      }
    },

    async handleBlurC(val) {
      try {
        if (!val) return
        const res = await getCarNo(val);
        this.carList = res.data;
        this.carBoole = false
        if (this.carList.length > 0) {
          this.$nextTick(() => {
            this.$refs.refZxzUniDataSelectC.showSelector = true
          })
        }
      } catch (e) {
        console.error(e)
      }
    },

    handleClear() {
      this.ruleForm = {
        carNo: "",
        vinNo: "",
        orderCode: "",
        customerName: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        ascription: "",
        procurementReportNumber: "",
        contractReportNumber: "",
        businessType: "",
        businessName: "",
        carId: 0,
        aaa: "",
        workOrderType:  this.workOrderType,
        contractType: "",
        orderId: "",
        propertyRightName: '',
        propertyRightId: '',
        insuranceChannels: 1
      }
    },


    handleChange(val) {
      if (val) {
        this.vinBoole = true
        this.ruleForm.carId = val.carId;
        this.ruleForm.carNo = val.carNo;
        this.ruleForm.vinNo = val.vinNo;
        this.ruleForm.brandName = val.brandName;
        this.ruleForm.seriesName = val.seriesName;
        this.ruleForm.modelName = val.modelName;
        findCarOrderVoByCarId(val.carId).then((res) => {
          if (res.code === 200) {
            const obj = res.data;
            this.ruleForm.businessType = obj?.businessType;
            this.ruleForm.orderCode = obj?.orderCode;
            this.ruleForm.customerName = obj?.customerName;
            this.ruleForm.ascription = obj?.ascription;
            this.ruleForm.ascriptionId = obj?.ascriptionId;
            this.ruleForm.propertyRightName = obj?.propertyRightName;
            this.ruleForm.propertyRightId = obj?.propertyRightId;
            this.ruleForm.contractReportNumber = obj?.contractReportNumber;
            this.ruleForm.procurementReportNumber = obj?.procurementReportNumber;
            this.ruleForm.orderChildId = obj?.orderChildId;
            this.ruleForm.contractNo = obj?.contractNo;
            this.ruleForm.contractType = obj?.contractType;
            this.ruleForm.orderId = obj?.orderChildId;
          }
        });
      } else {
        this.vinBoole = false
      }
    },

    handleSelectCarNo(val) {
      if (val) {
        this.carBoole = true
        this.ruleForm.carId = val.carId;
        this.ruleForm.carNo = val.carNo;
        this.ruleForm.vinNo = val.vinNo;
        this.ruleForm.modelName = val.modelName;
        this.ruleForm.seriesName = val.seriesName;
        this.ruleForm.brandName = val.brandName;
        this.ruleForm.businessType = val.businessType;
        findCarOrderVoByCarId(val.carId).then((res) => {
          if (res.code === 200) {
            const obj = res.data;
            this.ruleForm.businessType = obj?.businessType;
            this.ruleForm.orderCode = obj?.orderCode;
            this.ruleForm.customerName = obj?.customerName;
            this.ruleForm.ascription = obj?.ascription;
            this.ruleForm.ascriptionId = obj?.ascriptionId;
            this.ruleForm.propertyRightName = obj?.propertyRightName;
            this.ruleForm.propertyRightId = obj?.propertyRightId;
            this.ruleForm.contractReportNumber = obj?.contractReportNumber;
            this.ruleForm.procurementReportNumber = obj?.procurementReportNumber;
            this.ruleForm.orderChildId = obj?.orderChildId;
            this.ruleForm.contractNo = obj?.contractNo;
            this.ruleForm.contractType = obj?.contractType;
            this.ruleForm.orderId = obj?.orderChildId;
          }
        });
      } else {
        this.carBoole = false
      }
    },


    async submit() {
      try {
        await this.handleEffect()
        uni.showLoading();
        let res = await submitCarWorkOrder(this.ruleForm)
        if (res.code === 200) {
          uni.$emit("refBackList", true);
          this.$modal.msgSuccess("提交成功");
          setTimeout(() => {
            this.$tab.navigateBack();
          }, 1000);
        }
      } catch (error) {
        if (typeof error === 'string') {
          this.$nextTick(() => {
            uni.pageScrollTo({
              selector: error,
            })
          })
        } else {
          this.$modal.msg(error)
        }
      } finally {
        setTimeout(() => {
          uni.hideLoading();
        }, 1000)
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate().then((res) => {
          resolve();
        }).catch((err) => {
          let key = '.' + err[0].key
          reject(key);
        });
      });
    }

  },
};
</script>

<style scoped lang=""></style>


